<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中兴手机 Axon 30、Axon 30 Ultra、努比亚红魔6、中兴路由器、智能产品、中兴商城ZTEmall.com 官网正品保障_中兴 Axon 30 Ultra
        5G_ZTE中兴官方商城_ZTE中兴ZTEmall.com_中兴手机Axon30 Pro、Axon30 Ultra、努比亚红魔6Pro、中兴路由器、中兴智能家居、官网正品保障</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/GoodsCar.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2841773_cpy5m91hfcq.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/promise_ajax1.js"></script>
</head>

<body>
    <!-- 顶部导航 -->
    <div id="topbar">
        <div class="wrap-lg w">
            <div class="topbar-left cl">
                <a href="https://www.zte.com.cn/china/" rel="nofollow noopener noreferrer"
                    style="color: #fff; background-color: #008fd5;">中兴官网</a>
                <a href="https://www.ztedevices.com/cn/" rel="nofollow noopener noreferrer" target="_blank">消费者业务</a>
                <a href="http://support.zte.com.cn/support/h5index.aspx?_langType=zh-cn"
                    rel="nofollow noopener noreferrer" target="_blank">运营商业务</a>
                <a href="http://esupport.zte.com.cn" rel="nofollow noopener noreferrer" target="_blank">企业业务</a>
            </div>
            <div class="topbar-right">
                <a href="../html/login-ZTE.html" class="loginBtn">登录</a>
                <a href="../html/register-ZTE.html" class="registerBtn">注册</a>
            </div>
        </div>
    </div>
    <!-- 头部信息栏 -->
    <div id="header">
        <div class="logo">
            <a href="../html/index-ZTE.html"><img src="https://image.ztemall.com/bb27a3154a9d096e434aae60cd793d88.png"
                    alt="LOGO"></a>
        </div>
        <form action="https://www.ztemall.com/search.html" method="post" id="goods_search">
            <input type="text" name="keyword" id="search-key-word" class="x-input">
            <a href="javascript:;" class="searchBar">搜索
            </a>
        </form>
        <div class="lookGoodsCar">
            <a href="GoodsList-ZTE.html" class="icon-cart-a">继续选购商品</a>
        </div>
    </div>
    <!-- 页面导航栏 -->
    <div class="nav">
        <div class="wrap-lg w">
            <div class="nav-left">
                <div class="goodsType">全部商品分类</div>
            </div>
            <div class="nav-main">
                
                <a href="">Axon30系列旗舰</a>
                <a href="">努比亚专区</a>
                <a href="">红魔专区</a>
                <a href="">智能手表</a>
                <a href="">线下门店</a>
                <a href="">线上服务站</a>
            </div>
        </div>
    </div>
    <!-- 购物车 -->
    <div class="main">
        <div class="mian-lg w cl">
            <form action="">
                <div class="goodsCar">
                    <!-- 顶部 -->
                    <div class="car-top">
                        <div class="cart-col col-checkbox">
                            <input style="height: 12px;" type="checkbox" class="check-all"> 全选
                        </div>
                        <div class="cart-col col-name text-center">商品</div>
                        <div class="cart-col col-order text-center">单价（元）</div>
                        <div class="cart-col col-order text-center">数量</div>
                        <div class="cart-col col-order text-center">金额</div>
                        <div class="cart-col">操作</div>
                    </div>
                    <!-- 中部 -->
                    <div class="centerBox">
                        <!-- <div class="car-center">
                            <div class="cart-col text-center check-one">
                                <input type="checkbox" class="check-one" value="1">
                            </div>

                            <div class="cart-col text-center goods-photo">
                                <img width="64" height="64"
                                    src="https://image.ztemall.com/5a28cab25e56a01714871d448bf39a35.jpg?x-oss-process=image/resize,w_220,h_220">
                            </div>

                            <div class="cart-col text-center name">
                                <span>Apple iPhone 12 (A2404) 128GB 黑色 支持移动联通电信5G双卡双待手机 </span>
                            </div>

                            <div class="cart-col text-center price">￥2998.00</div>

                            <div class="cart-col text-center number">
                                <span class="number-increase-decrease">
                                    <a href="javascript:void(0);" class="btn reduce decrease">-</a>
                                    <input type="text" value="1" class="num">
                                    <a href="javascript:void(0);" class="btn add increase">+</a>
                                </span>
                            </div>

                            <div class="cart-col text-center subtotal"><span>￥2998.00</span></div>

                            <div class="cart-col text-center delete"><span>删除</span></div>
                        </div> -->
                    </div>
                    <!-- 结算部 -->
                    <div class="car-bottom">
                        <a class="deleteAll" href="javascript:;">删除</a>
                        <div class="cart-col cart-col-right">
                            <span class="selected">已选商品<span class="selectedTotal">0</span>件</span>
                            <span class="total">总计原价（不含运费）:<span class="priceTotal">0.00</span></span>
                            <span class="closing">去结算</span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- 帮助中心 -->
    <div class="helpInfo cl">
        <div class="help-lg w">
            <div class="help-top">
                <ul>
                    <li><img src="https://image.ztemall.com/6fd680f3aa8b65ec835bfee40c7c6cb1.png"
                            alt=""><span>品质保障</span></li>
                    <li><img src="	https://image.ztemall.com/a2e66efbb8f82c9448e39bbfa720af32.png"
                            alt=""><span>7天退货保障</span></li>
                    <li><img src="https://image.ztemall.com/bb910883c73e6524b5d0c9137ef235e5.png"
                            alt=""><span>15天换货承诺</span></li>
                    <li><img src="https://image.ztemall.com/2c0baf608789ea427c1c07344d27f81b.png"
                            alt=""><span>全国售后网点</span></li>
                    <li><img src="https://image.ztemall.com/782753c9be3ba2f610fc194e97307292.png"
                            alt=""><span>顺丰极速达</span></li>
                    <li><img src="	https://image.ztemall.com/bb910883c73e6524b5d0c9137ef235e5.png"
                            alt=""><span>99元起免运费</span></li>
                </ul>
            </div>
        </div>
        <!-- 底部导航与版权 -->
        <div class="footer">
            <div style="text-align: center;">
                <img src="https://image.ztemall.com/4838cc505d2a981c5ae09c56958d8895.png">
            </div>
            <div class="copyright">
                <span>服务协议 |隐私政策 |法律声明|</span> ©2014 - 2021 版权所有，并保留所有权利
            </div>
            <div class="footer-text" style="text-align: center;">增值电信业务经营许可证:
                <span>合字B2-20210066</span> | ICP备案证书号:<span>粤ICP备16018970号 | 粤公网安备 44030502005102号| 营业执照</span>
                <img src="https://szcert.ebs.org.cn/Images/govIcon.gif" alt="">
            </div>
        </div>
    </div>
</body>
<script>
    var topbarRight = document.getElementsByClassName("topbar-right")[0];
    // 标识用户身份
    var cookie = document.cookie;
    if (cookie) {
        var phone = getCookie("lgc");  //登录的用户名
        if (phone) {
            topbarRight.innerHTML = `<span>欢迎您,${phone}</span><button onclick="exit()">退出</button>`;
        }
    }


    $(async function () {
        var result = await searchGoodsCarByPhone({ phone });
        console.log(result);
        var { status, list } = result;

        if (status) {
            var html = "";
            list.forEach(({ id, goodsId, goodsName, goodsPrice, goodsImg, buyNum, subtotal, isChecked }) => {
                subtotal = "￥" + subtotal;
                goodsPrice = "￥" + goodsPrice;
                html += `<div class="car-center" data-id="${id}">
                         <div class="cart-col text-center checkone">
                            <input type="checkbox" class="check-one" ${isChecked ? "checked" : ""}>
                        </div>

                        <div class="cart-col text-center goods-photo">
                            <img width="64" height="64"
                                src="${goodsImg}">
                        </div>

                        <div class="cart-col text-center name">
                            <span>${goodsName}</span>
                        </div>

                        <div class="cart-col text-center price">${goodsPrice}</div>

                        <div class="cart-col text-center number">       
                                <a href="javascript:void(0);" class="btn reduce decrease">${buyNum > 1 ? "-" : ""}</a>
                                <input type="text" value="${buyNum}" class="num">
                                <a href="javascript:void(0);" class="btn add increase">+</a>
                        </div>

                        <div class="cart-col text-center subtotal"><span>${subtotal}</span></div>

                        <div class="cart-col text-center delete"><a href="javascript:;">删除</a></div>
                        </div>`
            })
            $(".centerBox").html(html);
        }

        isAllChecked();
        getTotal();

        // 全选
        $(".check-all").click(function () {
            var status = $(this).prop("checked");
            $(".check-one").prop("checked", status);
            getTotal();
        })

        // 反选 
        $(".check-one").click(function () {
            var status = $(this).prop("checked");
            isAllChecked();
            getTotal();
        })

        // 增加
        $(".add").click(async function () {
            var id = $(this).parents(".car-center").attr("data-id");
            var result = await addGoods({ id });
            var { status, msg } = result;
            if (!status) throw msg;
            //通过同级元素获取数量
            var num = $(this).prev().val();
            num++;
            $(this).prev().val(num); //赋值

            //通过父元素获取单价的文本
            var price = $(this).parent().prev().text().split("￥")[1] * 1;
            var subtotal = "￥" + (num * price).toFixed(2); //赋值给小计
            $(this).parent().next().text(subtotal);
            //通过同级元素获取减号“-”
            $(this).prev().prev().text("-");
            getTotal();
        })

        //减少
        $(".reduce").click(async function () {
            var num = $(this).next().val();
            if (num == 1) return false;
            num--;
            if (num == 1) $(this).text("");
            $(this).next().val(num); //赋值

            var price = $(this).parent().prev().text().split("￥")[1] * 1;
            var subtotal = "￥" + (num * price).toFixed(2); //赋值给小计
            $(this).parent().next().text(subtotal)
            getTotal();
            var id = $(this).parents(".car-center").attr("data-id");
            var result = await reduceGoods({ id });
            var { status, msg } = result;
            if (!status) throw msg;

        })

        // 单删
        $(".delete").click(async function () {
            if (confirm("您确定要删除该商品吗？")) {
                var id = $(this).parents(".car-center").attr("data-id");
                var result = await delGoods({ ids: id });
                var { status, msg } = result;
                if (!status) throw msg;

                $(this).parents(".car-center").remove();
                isAllChecked();
                getTotal();

            }
        })

        // 全删
        $(".deleteAll").click(async function () {
            if ($(".check-one:checked").length > 0) {
                if (confirm("是否删除选中的商品?")) {
                    var list = $(".check-one:checked").parents(".car-center").map(function () {
                        return $(this).attr("data-id")
                    }).get();
                    console.log(list);

                    var result = await delGoods({ ids: list.join(",") });
                    var { status, msg } = result;
                    if (!status) throw msg;

                    $(".check-one:checked").parents(".car-center").remove();
                    isAllChecked();
                    getTotal();
                }
            } else {
                alert("您还未选中商品")
            }
        })



        function isAllChecked() {
            if ($(".check-one").length && $(".check-one:checked").length == $(".check-one").length) {
                $(".check-all").prop("checked", true);
            } else {
                $(".check-all").prop("checked", false);
            }
        }

        // 结算封装
        function getTotal() {
            var sum = 0;
            var allPrice = 0;
            $(".check-one:checked").each(function () {
                var num = $(this).parents(".car-center").find(".num").val() * 1;
                var subtotal = $(this).parents(".car-center").find(".subtotal").text().split("￥")[1] * 1;

                sum += num;
                allPrice += subtotal;
            })
            $(".selectedTotal").text(sum);
            $(".priceTotal").text("￥" + allPrice.toFixed(2));
        }
    })






    function exit() {
        delCookie("lgc");
        location.reload();
    }
</script>

</html>